<template>
<!-- AI语音 -->
<u-popup :show="_show" mode="bottom" :round="8">
	<view class="ai-box">
		<view class="hd font32 fboxRow Ycenter">
			<view class="flex1">{{isAnchor ? '选择主播' : 'AI语音'}}</view>
			<view class="close" @click="close"><u-icon name="close" color="#BABABF"></u-icon></view>
		</view>
		<view class="bd userList" v-if="isAnchor">
			<view class="user-item fboxRow Ycenter" v-for="(item, index) in anchorList">
				<image class="avatar" :src="item.avatar"></image>
				<view class="name font28 font-ell1">{{item.name}}</view>
				<text class="text flex1 colro-98979C font28">{{item.type}}</text>
				<view class="btn-group fboxRow Ycenter">
					<view class="btn fboxRow Ycenter Xcenter font24 btn-gray" @click="anchorAudition(item, index)">
						<text class="bwfont font28" :class="item.isPlay ? 'bw-zanting' : 'bw-shipin1'"></text>
						试听</view>
					<view class="btn fboxRow Ycenter Xcenter font24 bg-linear" @click="anchorUse(item, index)">使用</view>
				</view>
			</view>
		</view>
		<view class="bd con-box fboxCol" v-else>
			<view class="text-box">
				<textarea class="text-inner font24 lh40" maxlength="1000" v-model="_fromData.resumeContent" placeholder="使用步骤：1.在此输入需要合成的文字；2.选择您想要的主播；3.调节您想要的语速和语调；4.点击“立即合成”"></textarea>
				<view class="fboxRow Ycenter text-action">
					<view class="btn fboxRow Ycenter Xcenter font24" @click="_fromData.resumeContent = ''">清空内容</view>
					<view class="num flex1 fboxRow Xend">
						{{_fromData.resumeContent ? _fromData.resumeContent.length: 0}}/1000
					</view>
				</view>
			</view>
			<view class="user-item fboxRow Ycenter" @click="isAnchor = true">
				<image class="avatar" :src="aiAnchor.avatar"></image>
				<view class="name flex1">{{aiAnchor.name}}</view>
				<text class="text colro-98979C font24">更换主播</text>
				<text class="bwfont bw-arrow-right font28" style="color: #BABABF;"></text>
			</view>
			<view class="flex1">
				
			</view>
			<!-- <view class="speech-intonation">
				<view class="item fboxRow Ycenter">
					<view class="tit font28">语速</view>
					<view class="flex1"><slider class="slider" style="width:100%;" @change='speechChange' activeColor='#CC9870'
					block-color="#CC9870" block-size="10" :value='speech' /></view>
					<view class="num font28">{{speech}}</view>
					<view class="btn font24 fboxRow Ycenter Xcenter">默认语速</view>
				</view>
				<view class="item fboxRow Ycenter">
					<view class="tit font28">语调</view>
					<view class="flex1"><slider class="slider" style="width:100%;" @change='intonationChange' activeColor='#CC9870'
					block-color="#CC9870" block-size="10" :value='intonation' /></view>
					<view class="num font28">{{intonation}}</view>
					<view class="btn font24 fboxRow Ycenter Xcenter">默认语调</view>
				</view>
			</view> -->
			<view class="btn-group fboxRow Ycenter">
				<!-- <view class="btn fboxRow Ycenter Xcenter font28 btn-gray" @tap="synthesis">
					<text class="bwfont" :class="auditionPlay ? 'bw-zanting' : 'bw-shipin1'"></text>
				点击试听</view> -->
				<view class="btn fboxRow Ycenter Xcenter font28 bg-linear flex1" @tap="submitSave">立即合成</view>
			</view>
		</view>
		<view class="ft"></view>
	</view>
</u-popup>
</template>
<script>
import { strTrim } from '@/static/js/common.js';
import { resumeAudioAnchorList, resumeAudioVideoDel, resumeAudioVideoUpdate, resumeAudioVideoShow } from '@/api/recruit.js';

let innerAudioContext = null
export default {
	props: {
		fromData:{
			type: Object,
			default:()=>{
				return {}
			}
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	computed:{
		_show:{
			get(){
				return this.show
			},
			set(val){
				this.$emit('update:show',val)
			}
		},
		_fromData:{
			get(){
				return this.fromData
			},
			set(val){
				this.$emit('update:fromData',val)
			}
		},
	},
	data() {
		return {
			// ai语音参数
			isAiPopup: false, // ai语音
			intelligenceVoice: '',
			isAnchor: false, // 选择主播
			speech: 0, // 语速
			intonation: 0, // 语调
			anchorList: [
				// { "avatar": "", "id": "", "name": "", "url": "", type:'' }
			],
			aiAnchor:{
				// userId: '1',
				// name: '本无',
				// text: '知性男声',
				// avatar: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/logo.png',
				// audition: 'https://ebc-prod.cdn.benwunet.com/aaba8ef118874a58bb8b3c3cd7cc7969.mp3'
			},
			auditionUrl: 'https://ebc-prod.cdn.benwunet.com/aaba8ef118874a58bb8b3c3cd7cc7969.mp3',
			auditionPlay: false,
			auditionIndex: '',
		};
	},
	watch:{
		show:{
			handler(val){
				if(val){
					this.getAiList()
				}
			},
			deep: true,
			immediate: true
		}
	},
	destroyed() {
		if(innerAudioContext){
			innerAudioContext.destroy()
		}
	},
	methods: {
		// 获取主播列表
		getAiList(){
			resumeAudioAnchorList().then(res=>{
				res.data.filter(item=>{
					item.isPlay = false
				})
				this.anchorList = res.data
				this.aiAnchor = res.data[0]
			})
		},
		// 关闭弹窗，关闭音频播放，
		close(){
			if(innerAudioContext){
				innerAudioContext.pause();
			}
			if(this.isAnchor){
				this.isAnchor = false
			}else{
				this._show = false
			}
		},
		// 语速
		speechChange(e){
			this.speech = e.detail.value
		},
		// 语调
		intonationChange(e){
			this.intonation = e.detail.value
		},
		// 保存内容
		submitSave(){
			if(this._fromData.resumeContent){
				this._show = false
				this._fromData.anchorId = this.aiAnchor.id
				const obj = { anchorId: this.aiAnchor.id, resumeContent: this._fromData.resumeContent}
				this.$emit('update', obj)
			}else{
				uni.showToast({
					icon: 'none',
					title:  '请输入需要合成语音的文字'
				})
			}
		},
		// 合成语音试听
		synthesis(){
			if(!innerAudioContext){
				innerAudioContext = uni.createInnerAudioContext();
			}
			if(this.auditionUrl){
				if(this.auditionPlay){
					this.auditionPlay = false
					innerAudioContext.pause();
				}else{
					this.auditionPlay = true
					innerAudioContext.src = this.auditionUrl;
					innerAudioContext.play();
				}
				innerAudioContext.onPause(()=>{
					innerAudioContext.destroy()
				})
				innerAudioContext.onEnded(()=>{
					this.auditionPlay = false
				})
			}
		},		
		// 主播使用
		anchorUse(item, index){
			this.isAnchor = false
			this.aiAnchor = item
			if(innerAudioContext){
				this.anchorList[index].isPlay = false
				innerAudioContext.pause();
			}
		},
		//主播试听
		anchorAudition(item, index) {
			if(!innerAudioContext){
				innerAudioContext = uni.createInnerAudioContext();
			}
			if (item.url) {
				if(item.isPlay){
					this.anchorList[index].isPlay = false
					innerAudioContext.pause();
				}else{
					this.anchorList.filter(item=>{
						item.isPlay = false
					})
					this.anchorList[index].isPlay = true
					innerAudioContext.src = item.url;
					innerAudioContext.play();
				}
				innerAudioContext.onPause(()=>{
					innerAudioContext.destroy()
				})
				innerAudioContext.onEnded(()=>{
					this.anchorList[index].isPlay = false
				})
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.btn-gray{background: #E8EDF1;}
.slider{margin: 0;}
.ai-box{}
.ai-box .hd{ padding: 0 40rpx; height: 88rpx;border-bottom: 1rpx solid var(--backgroundDivisionColor);}
.ai-box .bd{height: 1068rpx; }
.ai-box .ft{height: 30rpx;}
.ai-box .user-item .avatar{ margin-right: 22rpx; width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;}
.ai-box .user-item .colro-98979C{color: var(--contentFontFourColor);}

.con-box{padding: 40rpx;}
.con-box .text-box{ padding: 24rpx;background: #F4F8FB;border-radius: 12rpx}
.con-box .text-inner{width: 100%;height: 400rpx;}
.con-box .text-action .btn{width: 128rpx;height: 56rpx;background: #E8EDF1;border-radius: 8rpx}
.con-box .num{color: var(--contentFontFourColor);}
.con-box .user-item{padding: 40rpx 0;border-bottom: 1rpx solid var(--backgroundDivisionColor);}

.speech-intonation .item{margin-top: 40rpx;}
.speech-intonation .btn{width: 128rpx;height: 56rpx;background: #E8EDF1;border-radius: 8rpx}
.speech-intonation .num{ margin: 0 24rpx 0 10rpx; width: 70rpx;color: #38383D;}
.speech-intonation .tit{margin-right: 24rpx;}

.con-box .btn-group{margin-top: 54rpx;}
.con-box .btn-group .bwfont{margin-right: 10rpx;}
.con-box .btn-group .btn{width: 200rpx;height: 76rpx;border-radius: 8rpx}
.con-box .btn-group .btn +.btn{margin-left: 24rpx;}

.userList{padding: 0 40rpx 40rpx;}
.userList .user-item{padding: 30rpx 0 32rpx;border-top: 1rpx solid var(--backgroundDivisionColor);}
.userList .user-item:first-child{;border-top:0;}
.userList .user-item .name{margin-right: 24rpx;}
.userList .user-item .bwfont{margin-right: 6rpx;}
.userList .user-item .btn{width: 128rpx;height: 56rpx;border-radius: 8rpx;margin-left: 24rpx;}

</style>
